<template>
  <div class="flex flex-justify-center marT30">
    <div class="board">
      <div class="top pad20">
        <div class="grids">
          <div class="flex flex-justify-center flex-align-baseline">
            <div class="fn14">答对</div>
            <div class="fnl20">{{ correct }}</div>
          </div>
          <div class="flex flex-justify-center flex-align-baseline">
            <div class="fn14">答错</div>
            <div class="fnh20">{{ wrongNum }}</div>
          </div>
        </div>
        <div class="viewState" @click="dialogVisible = true">查看本次练题情况</div>
      </div>
      <div class="flex marT20 flex-align-center">
        <div :class="if_click == 0 ? 'is_click' : 'is_active'" @click="selectFun"></div>
        <div>答对自动跳转下一题</div>
      </div>
      <div class="list">
        <div
          class="list_item"
          v-for="(item, index) in optionList"
          :key="index"
          :class="{
            active: currentQuestionIndex === index,
            success: item.answer == item.answered,
            wrong_bg: item.answer != item.answered && item.answered != '',
          }"
          @click="gotoQuestion(index)"
        >
          {{ index + 1 }}
        </div>
      </div>
    </div>
    <div class="content marL20">
      <div>
        <div class="flex flex-align-center">
          <div class="questionType">
            {{
              currentQuestion.type == '1'
                ? '单选题'
                : currentQuestion.type == '2'
                  ? '判断题'
                  : '多选题'
            }}
          </div>
          <div class="marL10 title">{{ currentQuestion.title }}</div>
        </div>
        <div class="marT30" v-if="currentQuestion.type == '1' || currentQuestion.type == '2'">
          <div
            v-for="(val, i) in currentQuestion.options"
            :key="i"
            class="flex flex-align-center option"
            @click="optionFun(i, val.name.split(':')[0])"
          >
            <img
              :src="
                optionTab == i
                  ? currentQuestion.answer == val.name.split(':')[0]
                    ? selected
                    : error
                  : unSelect
              "
              alt=""
              class="selectImg"
            />
            <div class="option_item">{{ val.name }}</div>
          </div>
        </div>
        <div class="marT30" v-if="currentQuestion.type == '3'">
          <div
            v-for="(val, i) in currentQuestion.options"
            :key="i"
            class="flex flex-align-center option"
            @click="multiple(val)"
          >
            <!-- :src="isOptionSelected(val) ? selected : unSelect" -->
            <img
              :src="unSelect"
              alt=""
              class="selectImg"
              :class="isOptionSelected(val) ? 'select_bg' : ''"
            />
            <div class="option_item">{{ val.name }}</div>
          </div>
        </div>
        <!-- :class="selectedOptions.length >= 2 ? 'active_submit' : 'submit'" -->
        <div
          :class="
            selectedOptions.length < 2 || currentQuestion.answered != ''
              ? 'submit'
              : 'active_submit'
          "
          v-if="currentQuestion.type > '2'"
          @click="confirm"
        >
          提交
        </div>
        {{ currentQuestion.answered }}
        <div class="flex flex-align-center marT20">
          <div class="prev" @click="previousQuestion">上一题</div>
          <div class="next" @click="nextQuestion">下一题</div>
        </div>
        <div
          v-if="
            currentQuestion.answered != currentQuestion.answer && currentQuestion.answered != ''
          "
          class="marT30"
        >
          <div class="flex flex-align-end marT30">
            <div class="wrong">回答错误</div>
            <div class="flex flex-align-center marL30">
              <div class="trueAnswer">正确答案：</div>
              <div class="option_value">A</div>
            </div>
          </div>
          <div class="til">本题技巧</div>
          <div class="cont">
            <p>秒懂技巧: 车上的东西丢失损毁去</p>
            <div class="bg"></div>
            <div class="check">查看完整技巧</div>
          </div>
          <div class="til">试题解析</div>
          <div class="analysis">
            自2025年1月1日起《机动车驾驶证申领和使用规定》，申请大型货车、中型客车驾驶证在20周岁以上，63周岁以下
          </div>
          <div class="flex flex-align-center">
            <div class="diff">难度</div>
            <img
              src="http://j1.58cdn.com.cn/dist/pcNewSite/images/home/start.png"
              alt=""
              class="rate"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    width="500"
    :close-on-click-modal="false"
    :style="{ borderRadius: '20px' }"
    @closed="closed"
  >
    <div v-if="showModal == 0">
      <div class="flex">
        <div class="circle flex flex-justify-center flex-align-center">
          <div class="circle_item">
            <div class="flex flex-align-baseline">
              <div class="fn60">{{ accuracy }}</div>
              <div class="fn25">%</div>
            </div>
            <div class="accuracy">正确率</div>
          </div>
        </div>
        <div style="margin: 41px 0 0 50px">
          <div>
            <div class="fn14">练题时长</div>
            <div class="fn20 marT5">{{ formattedTime }}</div>
          </div>
          <div class="marT20">
            <div class="fn14">练题数</div>
            <div class="fn20 marT5">{{ practiceNum }}</div>
          </div>
          <div class="marT20">
            <div class="fn14">本次错题</div>
            <div class="fn20 marT5">{{ wrongNum }}</div>
          </div>
        </div>
      </div>
      <div class="tips">
        根据你的错题情况，为你量身定制学习计划，提高考试通过率，扫码下载驾校一点通APP获取吧！
      </div>
      <div class="dialog_foot flex">
        <div>
          <p>APP上功能更多，体验更好！</p>
          <div class="flex flex-align-center marT10 scanCode" @click="showModal = 1">
            <div>立即扫码下载驾校一点通APP</div>
            <img src="../../assets/img/exercise-dialog-right.png" alt="" class="right_icon" />
          </div>
        </div>
        <img src="../../assets/img/home-dialog-qrCode.png" alt="" class="codeSize" />
      </div>
    </div>
    <div v-else>
      <div class="download_tips">
        <div>下载APP后搜“冲刺口诀”</div>
        <div>免费领考试诀窍</div>
      </div>
      <img src="../../assets/img/home-dialog-qrCode.png" alt="" class="scanCodePic" />
      <div class="scanCode_download">扫码下载APP</div>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import selected from '@/assets/img/selected.png'
import unSelect from '@/assets/img/unSelect.png'
import error from '@/assets/img/error.png'

//判断答对是否自动跳转下一题
const if_click = ref(1)
// 弹框
const dialogVisible = ref(false)
// 选择题其中哪一项
const optionTab = ref(-1)
const isSelect = ref(false)
const currentQuestionIndex = ref(0)
// 答对题数
const correct = ref(0)
// 答错题数
const wrongNum = ref(0)
//计算答题时间
const elapsedTime = ref(0) // 毫秒
const isRunning = ref(false)
const startTime = ref<number | null>(null)
let timer = null
const start = () => {
  if (isRunning.value) return

  isRunning.value = true
  startTime.value = Date.now() - elapsedTime.value

  timer = window.setInterval(() => {
    elapsedTime.value = Date.now() - (startTime.value as number)
  }, 1000)
}
// 格式化时间显示 (HH:MM:SS)
const formattedTime = computed(() => {
  const totalSeconds = Math.floor(elapsedTime.value / 1000)
  const hours = Math.floor(totalSeconds / 3600)
  const minutes = Math.floor((totalSeconds % 3600) / 60)
  const seconds = totalSeconds % 60

  return [
    hours.toString().padStart(2, '0'),
    minutes.toString().padStart(2, '0'),
    seconds.toString().padStart(2, '0'),
  ].join(':')
})

// 控制模态框内容
const showModal = ref(0)

const optionList = ref([
  {
    title: '年满20周岁，可以初次申请下列哪种准驾车型？',
    type: '1',
    options: [
      {
        name: 'A:大型货车',
      },
      {
        name: 'B:大型客车',
      },
      {
        name: 'C:重型牵引挂车',
      },
      {
        name: 'D:所有车型',
      },
    ],
    answer: 'A',
    answered: '',
  },
  {
    title: '机动车行驶证灭失、丢失，机动车所有人要向登记地车辆管理所申请补领、换领。',
    type: '2',
    options: [
      {
        name: 'A:正确',
      },
      {
        name: 'B:错误',
      },
    ],
    answer: 'A',
    answered: '',
  },
  {
    title: '发生交通事故后，防止二次事故的有效措施是什么？',
    type: '3',
    options: [
      {
        name: 'A:疏散人员',
      },
      {
        name: 'B:开启危险报警闪光灯',
      },
      {
        name: 'C:标记伤员的原始位置',
      },
      {
        name: 'D:正确放置危险警告标志',
      },
    ],
    answer: 'A,B,D',
    answered: '',
  },
  {
    title: '驾驶人驾驶机动车违反道路交通信号灯通行一次记多少分?',
    type: '1',
    options: [
      {
        name: 'A:2分',
      },
      {
        name: 'B:3分',
      },
      {
        name: 'C:6分',
      },
      {
        name: 'D:12分',
      },
    ],
    answer: 'C',
    answered: '',
  },
])
const currentQuestion = computed<any | undefined>(() => {
  return optionList.value[currentQuestionIndex.value]
})
// 正确率
const accuracy = computed(() => {
  if (correct.value + wrongNum.value == 0) {
    return 0
  } else {
    return Math.floor((correct.value / (correct.value + wrongNum.value)) * 100)
  }
})
//练习数
const practiceNum = computed(() => {
  return correct.value + wrongNum.value
})

function selectFun() {
  if_click.value = if_click.value === 0 ? 1 : 0
}
function optionFun(index: number, ele: any) {
  if (!isSelect.value) {
    console.log(1231231)
    optionTab.value = index
    currentQuestion.value.answered = ele
    if (currentQuestion.value.answered == currentQuestion.value.answer && if_click.value == 1) {
      setTimeout(() => {
        nextQuestion()
      }, 100)
    }
    if (ele == currentQuestion.value.answer) {
      correct.value++
    } else {
      wrongNum.value++
    }
  }
  isSelect.value = true
}
// 已选中的选项数组
const selectedOptions = reactive<string[]>([])
const multiple = (option: any) => {
  const optionKey = option.name.split(':')[0]
  const index = selectedOptions.indexOf(optionKey)
  if (index === -1) {
    selectedOptions.push(optionKey)
  } else {
    selectedOptions.splice(index, 1)
  }
  console.log('当前选中选项:', selectedOptions)
}
const isOptionSelected = (option: any) => {
  const optionKey = option.name.split(':')[0]
  return selectedOptions.includes(optionKey)
}

function nextQuestion() {
  if (currentQuestionIndex.value < optionList.value.length - 1) {
    optionTab.value = -1
    isSelect.value = false
    currentQuestionIndex.value++
    checkAnswer()
  }
}
function previousQuestion() {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--
    optionTab.value = -1
    isSelect.value = false
    checkAnswer()
  }
}
function checkAnswer() {
  let seleteValue = currentQuestion.value.answered
  if (seleteValue) {
    currentQuestion.value.options.forEach((item: any, index: any) => {
      if (item.name.split(':')[0] == seleteValue) {
        optionTab.value = index
        isSelect.value = true
      }
    })
  } else {
    optionTab.value = -1
    isSelect.value = false
  }
}
function gotoQuestion(index: number) {
  currentQuestionIndex.value = index
  checkAnswer()
}
function closed() {
  dialogVisible.value = false
  showModal.value = 0
}
function confirm() {
  currentQuestion.value.answered = selectedOptions.join(',')
  const select = currentQuestion.value.answered
  console.log(select, 'select==')

  console.log(currentQuestion.value.answered, 'currentQuestion.answered====')
  console.log(1111)
  console.log(currentQuestion.value.answer, 'currentQuestion.value.answer====')

  if (selectedOptions.length >= 2 && select !== '' && select != currentQuestion.value.answer) {
    console.log(2222)
    // if (select == currentQuestion.value.answer && if_click.value == 1) {
    //   setTimeout(() => {
    //     nextQuestion()
    //   }, 100)
    // }
    // if (select == currentQuestion.value.answer) {
    //   correct.value++
    // } else {
    //   wrongNum.value++
    // }
    if (select === currentQuestion.value.answer) {
      correct.value++
      if (if_click.value === 1) {
        setTimeout(nextQuestion, 100)
      }
    } else {
      wrongNum.value++
    }
  }
}
onMounted(() => {
  start()
})
</script>
<style lang="scss" scoped>
.board {
  width: 300px;
  height: 500px;
  border-radius: 14px;
  background-color: #fff;
  padding: 30px;
}
.content {
  width: 800px;
  min-height: 500px;
  border-radius: 14px;
  background-color: #fff;
  padding: 30px 30px 20px;
}
.top {
  overflow: hidden;
  width: 242px;
  height: 114px;
  background: url('@/assets/img/detail-top-bg.png') no-repeat 0;
  border-radius: 14px;
}
.grids {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.fn14 {
  font-size: 14px;
  color: #0a2433;
}
.fnl20,
.fnh20 {
  font-size: 20px;
  margin-left: 5px;
}
.fnl20 {
  color: #00c356;
}
.fnh20 {
  color: #ff2b3c;
}
.viewState {
  border-radius: 16px;
  border: 1px solid #bbbde2;
  color: #0a2433;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 200px;
  height: 32px;
  line-height: 32px;
  margin-top: 20px;
  text-align: center;
}
.is_click,
.is_active {
  margin-right: 7px;
  border-radius: 50%;
  cursor: pointer;
  width: 18px;
  height: 18px;
}
.is_click {
  border: #ccc solid 1px;
}
.is_active {
  border: #00c356 solid 6px;
}
.circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid #eaebee;
  box-shadow: inset 0 0 0 2px #eaebee;
  margin: 41px 0 0 112px;
}
.fn60 {
  font-size: 40px;
  font-weight: bold;
  color: #000;
}
.fn25 {
  font-size: 25px;
  color: #000;
  margin-left: 15px;
}
.accuracy {
  font-size: 16px;
  color: #878e9b;
  font-weight: 400;
  text-align: center;
}
.fn14 {
  font-size: 14px;
  color: #878e9b;
  font-weight: 400;
}
.fn20 {
  font-size: 20px;
  color: #0a2433;
  font-weight: 600;
}
.tips {
  font-size: 18px;
  font-weight: 600;
  color: #101d37;
  margin: 40px auto 0;
  width: 406px;
  text-align: center;
  line-height: 27px;
}
.dialog_foot {
  overflow: hidden;
  width: 387px;
  height: 98px;
  margin: 14px auto 0;
  background: url(@/assets/img/exercise-bg.png) no-repeat 0 0;
  background-size: contain;
  padding: 15px 10px 15px 20px;
  p {
    font-size: 21px;
    font-weight: 500;
    color: #101d37;
    line-height: 29px;
    opacity: 0.5;
  }
}
.right_icon {
  width: 20px;
  height: 11px;
  margin-left: 10px;
}
.scanCode {
  width: 256px;
  height: 30px;
  margin: 9px 0 0 0;
  border: none;
  background: rgba(255, 188, 209, 0.21);
  border-radius: 3px;
  backdrop-filter: blur(40px);
  font-weight: 600;
  color: #9043b8;
  line-height: 30px;
  letter-spacing: 1px;
  cursor: pointer;
  font-size: 14px;
  padding-left: 14px;
}
.codeSize {
  width: 77px;
  height: 77px;
}
.list {
  width: 253px;
  height: 267px;
  margin: 20px auto 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 5px;
  row-gap: 10px;
}
.list_item {
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  border: 1px solid #e3e7e9;
  text-align: center;
  color: #0a2433;
  cursor: pointer;
  height: 40px;
  width: 40px;
  position: relative;
}
.list_item.active::after {
  content: '当前题';
  position: absolute;
  left: -3px;
  bottom: -6px;
  width: 46px;
  height: 18px;
  background: #2b424f;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  line-height: 18px;
}
.questionType {
  padding: 0 5px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  background: rgba(0, 195, 86, 0.1);
  color: #00c356;
}
.title {
  font-size: 18px;
  font-weight: 600;
  color: #0a2433;
}
.selectImg {
  width: 20px;
  height: 20px;
  margin-right: 16px;
}
.option_item {
  font-size: 18px;
  font-weight: 400;
  color: #0a2433;
  line-height: 18px;
}
.option {
  margin-bottom: 30px;
  cursor: pointer;
}
.prev {
  border-radius: 20px 0 0 20px;
  margin: 0 10px 0 0;
}
.next {
  border-radius: 0 20px 20px 0;
}
.prev,
.next {
  cursor: pointer;
  width: 112px;
  height: 40px;
  border: #e3e7e9 solid 1px;
  font-size: 16px;
  font-weight: 500;
  color: #0a2433;
  line-height: 40px;
  text-align: center;
}
.wrong {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #ec4b4b;
}
.trueAnswer {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #0a2433;
}
.option_value {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #101d37;
  letter-spacing: 6px;
}
.til {
  margin: 50px 0 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #101d37;
}
.analysis {
  margin: 20px 0 10px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0a2433;
}
.diff {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #0a2433;
}
.rate {
  width: 12px;
  height: 12px;
  margin-left: 6px;
}
.cont {
  position: relative;
  width: 265px;
  margin: 15px 0 0 0;
  p {
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    color: #0a2433;
  }
}
.bg {
  position: absolute;
  left: 89px;
  top: 7px;
  width: 102px;
  height: 17px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}
.check {
  position: absolute;
  right: 0;
  top: 0;
  width: 108px;
  height: 32px;
  background: linear-gradient(330deg, #eba867 0%, #f0d9ab 56%, #eba867 100%);
  box-shadow: inset 0px 1px 43px 0px rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 32px;
  color: #941a00;
  cursor: pointer;
  text-align: center;
}
.wrong_bg {
  border-color: #ffe3e2;
  background: #ffe3e2;
  color: #ff2b3c;
}
.success {
  border-color: #eafcf2;
  background: #eafcf2;
  color: #00c356;
}
.download_tips {
  width: 320px;
  margin: 25px auto 0;
  font-size: 28px;
  font-weight: 600;
  color: #101d37;
  line-height: 40px;
  text-align: center;
}
.scanCode_download {
  font-size: 25px;
  font-weight: 600;
  color: #727272;
  line-height: 34px;
  letter-spacing: 4px;
  text-align: center;
}
.scanCodePic {
  width: 200px;
  height: 200px;
  margin: 31px auto 7px;
}
.submit,
.active_submit {
  width: 112px;
  height: 40px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  border: none;
  background: #00c356;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.submit {
  opacity: 0.6;
}
.active_submit {
  opacity: 1;
}
.select_bg {
  background: #ccc;
  border-radius: 50%;
}
</style>
